<template>
	<view>
		<view class="search-container">
			<image src="../../../static/imgs/backicon.png" class="back-icon"></image>
			<view class="searchBox">
				<view class="inputBox">
					<view class="iconBox">
						<image class="icon" src="../../../static/imgs/sousuohui@3.png" mode=""></image>
					</view>
					<u-input class="input" v-model="search" :custom-style="{color: '#fff'}" confirm-type="search" @confirm="confirmHandle"
					 placeholder="请输入您的目的地" :focus="inputing" />
				</view>
			</view>
		</view>
		<view class="now-location" @click="nav">
			<view class="title">
				当前位置
			</view>
			<view class="top">
				<image class="icon" src="../../../static/imgs/location.png"></image> 深圳
			</view>
			<view class="bottom">
				广东省深圳市福田区富强路
			</view>
		</view>
		<view class="location-history">
			<view class="history-item" @click="nav">
				<image src="../../../static/imgs/gdrq.png" class="icon"></image>
				沙尾地铁站
			</view>
			<view class="history-item" @click="nav">
				<image src="../../../static/imgs/gdrq.png" class="icon"></image>
				深圳易思博软件大厦
			</view>
			<view class="history-item" @click="nav">
				<image src="../../../static/imgs/gdrq.png" class="icon"></image>
				深圳南山盈峰大厦
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		onLoad() {
			this.getLocation()
		},
		methods: {
			getLocation() {
				const that = this
				uni.getLocation({
					type: 'gcj02',
					success(e) {
						that.lat = e.latitude
						that.lng = e.longitude
						that.markers = [{
							id: 0,
							latitude: e.latitude,
							longitude: e.longitude,
							iconPath: '/static/imgs/location.png',
							width: 100,
							height: 100
						}]
					}
				})
			},
			nav() {
				uni.navigateTo({
					url: './carList'
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss">
	.search-container {
		width: 100%;
		padding: 0 20rpx;
		margin-top: calc(var(--status-bar-height) + 20rpx);
		display: flex;
		align-items: center;
		justify-content: space-around;

		.back-icon {
			width: 60rpx;
			height: 60rpx;
		}

		.searchBox {
			width: calc(100% - 100rpx);
			display: flex;
			align-items: center;
			justify-content: space-between;

			.inputBox {
				width: 100%;
				display: flex;
				align-items: center;
				background: #F4F4F4;
				border-radius: 60rpx;

				.iconBox {
					width: 96rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 20rpx 0;

					.icon {
						width: 32rpx;
						height: 32rpx;
					}

					.input {
						width: 100%;
					}

					/deep/.uni-input-input {
						color: #FFFFFF;
					}
				}
			}

			.text {
				margin-left: 20rpx;
				white-space: nowrap;
				color: #FFFFFF;
			}

		}
	}


	.now-location {
		padding: 40rpx;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-direction: column;

		.title {
			color: #333333;
			font-weight: 600;
			font-size: 28rpx;
		}

		.top {
			color: #3587F7;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-top: 20rpx;

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}

		.bottom {
			color: #999999;
			margin-top: 20rpx;
		}
	}

	.location-history {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-direction: column;
		padding: 0 40rpx;

		.history-item {
			color: #333;
			padding: 30rpx 0;
			border-bottom: 2rpx solid #F4F4F4;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>
